// // map中的配置选项,target 表示地图实例挂载的容器 view 表示地图的视图 Layers 表示地图的底图(都有一个底图) source 图层数据源
import Map from 'ol/Map'
import './style.css'
import 'ol/ol.css';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
const view = new View({
  center: [114.25, 30.59],
  zoom: 10,
  projection: "EPSG:4326"// 经纬度底图
})
// 城市矢量底图--二维图 Z 表示缩放级别
// const gaodeSource = new XYZ({
//   url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',// 高德的数据源
// })
// const gaodeLayer = new TileLayer({
//   source: gaodeSource
// })

// 加载天地图瓦片--国家地理信息平台系统
const TIANDITUKEY = 'adeccec91b03fed9768817d17755b6df'
const tiandituSource = new XYZ({
  // img底图加载
  // url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITUKEY}`
  // vec底图加载
  url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITUKEY}`
})
const tiandituLayer = new TileLayer({
  source: tiandituSource
})

const map = new Map({
  target: 'map',
  view,
  layers: [tiandituLayer]
})
